<template>
  <Overlay append-to-body>
    <div class="toast-wrap">
      <van-loading class="icon" :type="type" :color="color" />
      <div class="text" v-show="text" :style="{ color }">{{ text }}</div>
    </div>
  </Overlay>
</template>

<script setup>
  import { onMounted, onUnmounted } from 'vue';
  import { loadingOptions } from '../index';

  const props = defineProps({
    type: { type: String, default: 'spinner' },
    color: { type: String, default: '#fff' },
    text: { type: String, default: '数据加载中...' }
  })


  onMounted(() => {
    // loadingOptions.value
  })

  onUnmounted(() => {

  })
</script>

<style lang="scss" scoped>
  .toast-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    min-width: 14rem;
    max-width: 80vw;
    min-height: 14rem;
    background: #000;
    box-sizing: border-box;
    border-radius: 1rem;

    .icon {
      // font-size: 2.4rem;
      text-align: center;
    }

    .text {
      font-size: 1.4rem;
      margin-top: 1.4rem;
      text-align: center;
    }
  }
</style>